<template>
  <div id="My">
    <!-- 头部 -->
    <header class="my_header">
      <router-link to="/change_user">
        <div class="user_avatar">
          <img :src="userInfo.avatar" alt>
        </div>
        <div class="user_container">
          <div class="nick_name">{{userInfo.nick_name}}</div>
          <div class="user_mobile">{{userInfo.mobile}}</div>
        </div>
        <div class="more">
          <i>
            <svg
              t="1553346769702"
              class="icon"
              style
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2548"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="200"
              height="200"
            >
              <path
                d="M704 512c0-8.288-3.232-15.776-8.4-21.456l0.08-0.064-320-352-0.08 0.08A31.76 31.76 0 0 0 352 128a32 32 0 0 0-32 32c0 8.288 3.232 15.76 8.4 21.456l-0.08 0.08L628.752 512 328.32 842.464l0.08 0.08A31.776 31.776 0 0 0 320 864a32 32 0 0 0 32 32 31.84 31.84 0 0 0 23.6-10.544l0.08 0.08 320-352-0.08-0.08c5.168-5.68 8.4-13.168 8.4-21.456z"
                p-id="2549"
                fill="#e6e6e6"
              ></path>
            </svg>
          </i>
        </div>
      </router-link>
    </header>
    <!-- navList -->
    <div class="lists">
      <Lists :ListItem="listItems"/>
      <i class="bottom-line"></i>
      <Lists :ListItem="listItemTwo"/>
    </div>
    <!-- logout -->
    <div class="logout">
      <Btn
        width="5.135135rem"
        height="1.108108rem"
        radius="0.486486rem"
        bg="#7BA6D1"
        col="#fff"
        font="0.405405rem"
        @click="logout"
      >退出</Btn>
    </div>
  </div>
</template>

<script>
import Lists from "@/components/Lists";
import Btn from "@/components/Btn";
export default {
  name: "my",
  data() {
    return {
      userInfo: {
        avatar:
          "http://a.hiphotos.baidu.com/image/pic/item/09fa513d269759eee5b61ac2befb43166c22dfd1.jpg",
        nick_name: "牛掰粉",
        mobile: 1369900000
      },
      listItems: [
        {
          icon: require("../../assets/sql.png"),
          listName: "转币记录",
          showReturn: true,
          path: "/home",
          returnColor: "#7BA6D1"
        },
        {
          icon: require("../../assets/lock.png"),
          listName: "锁仓记录",
          showReturn: true,
          path: "/home",
          returnColor: "#7BA6D1"
        }
      ],
      listItemTwo: [
        {
          icon: require("../../assets/yq.png"),
          listName: "邀请好友",
          listDetail: "",
          showReturn: true,
          path: "/home",
          returnColor: "#7BA6D1"
        },
        {
          icon: require("../../assets/connect.png"),
          listName: "联系客服",
          listDetail: "400-12345678",
          showReturn: false,
          path: "/home",
          returnColor: "#7BA6D1"
        },
        {
          icon: require("../../assets/about.png"),
          listName: "关于我们",
          listDetail: "",
          showReturn: true,
          path: "/home",
          returnColor: "#7BA6D1"
        },
        {
          icon: require("../../assets/version.png"),
          listName: "版本号",
          listDetail: "V1.0.0",
          showReturn: false,
          path: "/home",
          returnColor: "#7BA6D1"
        }
      ]
    };
  },
  methods: {
    logout() {
      this.$router.push("/login");
    }
  },
  components: {
    Lists,
    Btn
  }
};
</script>

<style scoped lang="stylus">
@import '../../common/styl/mixin'
#My
  position absolute
  top 0
  left 0
  bottom rem(49)
  background-color $bgCol
  width 100%
  .my_header
    height rem(175)
    a
      height 100%
      display flex
      justify-content flex-start
      align-items center
      box-sizing border-box
      padding rem(45) rem(20) 0
      background-color #314B7E
      .user_avatar
        width rem(65)
        height rem(65)
        border-radius 50%
        overflow hidden
        img
          width 100%
          height 100%
          object-fit cover
      .user_container
        margin-right auto
        color #fff
        margin-left rem(13)
        .nick_name, .user_mobile
          font-size rem(16)
          font-weight bold
        .user_mobile
          margin-top rem(16)
          font-weight 400
        .nick_name
          margin-top rem(10)
      .more
        width rem(20)
        height rem(20)
        padding rem(10)
        padding-right 0
        i
          display inline-block
          width 100%
          height 100%
          svg
            width 100%
            height 100%
  .lists
    .bottom-line
      display block
      margin-bottom rem(10)
  .logout
    text-align center
    margin-top rem(40)
</style>
